<template>
    <el-popover
        v-model:visible="visible"
        ref="popover"
        :width="120"
        :show-arrow="false"
        :offset="-3"
        :hide-after="0"
        placement="bottom-start"
        trigger="contextmenu"
        popper-class="cell-selection-popover">
        <div class="menu-item" @click="handleAction('addPrev', rowIndex)"><span>在上方插入</span></div>
        <div class="menu-item" @click="handleAction('addNext', rowIndex)"><span>在下方插入</span></div>
        <div class="menu-gutter"></div>
        <div class="menu-item" @click="handleAction('remove', rowIndex)"><span>删除记录</span></div>
        <template #reference>
            <div :class="['handle', { 'checked': isChecked }]" v-click-outside="onClickOutside">
                <div class="handle-no">{{ rowIndex + 1 }}</div>
                <div class="handle-selection">
                    <el-checkbox v-model="isChecked" @change="handleChange"/>
                </div>
            </div>
        </template>
    </el-popover>
</template>

<script setup lang="ts">
import { ref, unref, watch } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'
const props = defineProps({
    checked: Boolean,
    rowIndex: Number
})
const visible = ref(false)
const isChecked = ref(false)

const onClickOutside = () => {
    visible.value = false
}

watch(() => props.checked, (val) => {
    isChecked.value = val
})

const emit = defineEmits(['change', 'action'])
const handleChange = (value) => {
    emit('change', value)
}
const handleAction = (type: string, index: number) => {
    visible.value = false
    emit('action', { type, index })
}

</script>

<style scoped lang="scss">
.handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    &-no{ display: block; }
    &-selection{ display: none; }
    &:hover,
    &.checked{
        .handle-no{ display: none; }
        .handle-selection{ display: inline-flex; }
    }
}
</style>

<style lang="scss">
.cell-selection-popover{
    padding: 5px !important;
    min-width: 60px;
    box-shadow: 2px 2px 8px rgba($color: #000000, $alpha: 0.2) !important;
    border: 1px solid #ddd !important;
    .menu-gutter
    {
        height: 1px;
        background-color: #e5e5e5;
        margin: 5px 0;
    }
    .menu-item{
        padding: 8px 10px;
        font-size: 12px;
        color: #333;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        border-radius: var(--el-border-radius-base);
        &:hover{
            background-color: #eaeef0;
        }
        span{
            margin-left: 6px;
        }
    }
}
</style>